<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-1.11.0.min.js"></script>

    <style>
        a{
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
</head>
<body>
    <button>新增</button>
    <hr>

    <table border="1" width="50%" id="tab">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级名称</th>
        </tr>

        <tr>
            <td>1</td>
            <td>zs</td>
            <td>18</td>
            <td>前锋一班</td>
        </tr>
    </table>

    <div id="page">
        <a href="javascript:void(0);" onclick="">前一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="javascript:void(0);" onclick="">后一页</a>
    </div>
</body>
<script>

    function go(pageNum){
        //发送异步请求
        $.ajax({
            url:"/stu?action=findPage",
            type:"get",
            data:{pageNum:pageNum,size:2},
            success:function (pageInfo){
                //展示数据集
                let stus = pageInfo.list;

                $("#tab").html("<tr>\n" +
                    "            <th>编号</th>\n" +
                    "            <th>姓名</th>\n" +
                    "            <th>年龄</th>\n" +
                    "            <th>班级名称</th>\n" +
                    "        </tr>")

                $.each(stus,function (idx,stu){
                    $("#tab").append(" <tr>\n" +
                        "            <td>"+(idx+1)+"</td>\n" +
                        "            <td>"+stu.name+"</td>\n" +
                        "            <td>"+stu.age+"</td>\n" +
                        "            <td>"+(stu.classes==null?"":stu.classes.name)+"</td>\n" +
                        "        </tr>")
                });

                //展示分页条
                $("#page").html("<a href=\"javascript:void(0);\" onclick=\"go("+pageInfo.prePage+")\">前一页</a>")

                for (let i = 1; i <= pageInfo.pages; i++) {
                    if (i == pageInfo.pageNum){
                        //当前页
                        $("#page").append("<a href=\"javascript:void(0);\">"+i+"</a>")
                    }else{
                        $("#page").append("<a href=\"javascript:void(0);\" onclick=\"go("+i+")\">"+i+"</a>")
                    }
                }

                $("#page").append("<a href=\"javascript:void(0);\" onclick=\"go("+pageInfo.nextPage+")\">后一页</a>")

            },
            dataType:"json"
        })
    }


    //进入页面就开始查询第一页
    go(1);
</script>


</html>